<template>
  <div class="container">
    <nav-bar :title="'我的账户'" />
    <van-tabs
      v-model="activeIndex"
      :swipe-threshold="5"
      sticky
      offset-top="46"
      type="line"

    >
    <!-- @click="handleTabClick" -->
    <van-tab
        v-for="(item, index) in tabTitles"
        :key="index"
        :title="item.tabTitle"
      >
        <!-- <van-pull-refresh
          v-model="refreshing"
          style="min-height: calc(100vh - 84px)"
          @refresh="onRefresh"
        > -->
          <balances @refresh="getInfos()" :userInfo="userInfo" v-if="activeIndex == 0" />
          <score :userInfo="userInfo" v-if="activeIndex == 1"/>
          <Record v-if="activeIndex == 2"/>
          
        <!-- </van-pull-refresh> -->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getBalance, withdrawalReview,getInfo } from '@/api/user'
import Balances from './modules/Balances.vue';
import Score from './modules/Score.vue';
import Record from './modules/Record.vue';
import { mapGetters } from 'vuex'
// import Record from './modules/Record.vue';
export default {
  name: 'Balance',
  components:{
    Balances,
    Score,
    Record
  },
  computed: {
  },
  data() {
    return {
      activeIndex:0,
      tabTitles:[
        {
          tabTitle:'我的余额',
          index:0
        },
        {
          tabTitle:'我的积分',
          index:1
        },
        {
          tabTitle:'变动记录',
          index:2
        },
      ],
      nowBalbance: 0,
      withdrawalAmount: 0,
      rechargeList: ['50.00', '100.00', '500.00', '1000.00'],
      rechargeCount: '',
      wthdrawalCount: '',
      show: '',
      setWthdrawals: false,
      showRecharge: false,
      selectIndex: 0,
      showWthdrawal: false,
      ispay: false,
      userInfo:null
    }
  },
  async created() {
    this.$toast.loading({
      duration:50000,
      message:'加载中...'
    })
    this.getInfos()
  },
  methods: {
    async getInfos(){
      const res =await getInfo(this.$store.state.user.token)
          const data = res.map
          if (!data) {
            this.$toast.fail('获取用户信息失败')
            this.$router.push({
              name:'Login'
            })
            return false
          }
          this.userInfo = data.info
          this.$toast.clear()
    },
    shows(show) {
      // this.setWthdrawals = false
      if (this.userInfo.ktxBalance === 0) {
        return this.$toast.fail('暂无可提现金额')
      }
      if (show === 'wthdrawal') {
        this.showWthdrawal = true
      } else {
        this.showRecharge = true
      }
      // this.showRecharge = true
      this.show = show
    },
    selects(val, index) {
      // this.rechargeCount = val
      this.selectIndex = index
    },
    setWthdrawal() {
      this.setWthdrawals = true
      // this.wthdrawalCount = this.userInfo.ktxBalance
    },
    async confirmPay() {
      this.$toast.loading('加载中')
      if(!this.ispay){
        this.ispay =true
      }else{
        return false
      }
      const data = {
        userRealName: this.userInfo.userRealName,
        id: this.userInfo.id,
        userWithdrawalAmount: this.userInfo.ktxBalance,
        mobile: this.userInfo.mobile
      }
      // console.log(this.userInfo)
      if (this.setWthdrawals !== true) {
        data.userWithdrawalAmount = this.wthdrawalCount
        if(this.wthdrawalCount >this.userInfo.ktxBalance){
          this.withdrawalAmount = ''
          this.showWthdrawal = false
          this.$toast.fail('填入金额过大')
          return false
        }
      }
      if(data.userWithdrawalAmount <100){
        return this.$toast.fail('每次提现金额应不低于100元')
      }
      const res = await withdrawalReview(data)
      if (res.code === 200) {
        this.$toast.success('申请成功')
        this.wthdrawalCount = 0
      }
      await this.getInfos()
      this.ispay == true
      console.log(res)
    },
    closeWthdrawals() {
      this.wthdrawalCount = ''
      this.setWthdrawals = false
    },
    // yanzheng(val) {
    //   console.log(val)
    //   if(this.wthdrawalCount !==''){
    //     if (this.wthdrawalCount < 100) {
    //       this.$toast.fail('每次提现金额应不低于100元')
    //     }
    //     if (this.wthdrawalCount > this.userInfo.ktxBalance) {
    //       this.$toast.fail('可提现金额不足')
    //     }
    //   }
    // }
  }
}
</script>
<style lang='scss' scoped>
.container{
    margin: 0;
    padding: 0;

    .top{
        margin: 0 24px;
        padding-top: 100px;

        .content{
            display: flex;
            flex-direction: column;
            align-items: center;

            .icons{
              width: 100px;
              height: 100px;
              line-height: 100px;
              border-radius: 50%;
              text-align: center;
              font-size: 60px;
              color: #fff;
              background-color: yellow;

            }
            .tits{
              display: flex;
              flex-direction: column;
              font-size: 30px;
              font-weight: bold;
              .balance{
                color: #ef3939;
                // margin-left: 30px
              }
            }

            .centers{
              display: flex;
              flex-direction: row;
              box-sizing: border-box;
              // padding: 0 40px;
              height: 40px;
              line-height: 40px;
              width: 100%;
              justify-content: space-between;
              align-items: center;
              margin-top: 60px;
              .balances{
                color: #ef3939;
                // margin-left: 30px
              }
            }

            .btns{
              position: fixed;
              bottom: 400px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              .btn{
                width: 230px;
                height: 80px;
                line-height: 80px;
                border-radius: 20px;
                text-align: center;
                margin-top: 150px;
              }
              .chong{
                color: #ef3939;
                border: 1px solid #ef3939;
              }
              .ti{
                color: green;
                // margin-left: 100px;
                border: 1px solid green;
              }
            }

        }

        .selected{
          margin-top: 100px;
          padding: 0 24px;
          margin-bottom: 100px;
          .recharge{
            display: flex;
            flex-direction: column;
            align-items: center;

            .list{
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-start;

              .btn{
                margin-top: 20px;
                margin-left: 40px;
                width: 190px;
                height: 80px;
                line-height: 80px;
                border: 1px solid #00000080;
                border-radius: 20px;
                text-align: center;
              }
              ::v-deep(input){
                  width: 180px !important;
                  line-height: 70px !important;
                  border: none !important;
                  padding: 0 !important;
                  margin: 0;
                  text-align: center;
                }
                .inputss{
                  margin-left: 40px;
                }
              .notFirst{
                margin-left: 60px
              }
            }

            .paybtn{
              width: 230px;
              height: 80px;
              line-height: 80px;
              text-align: center;
              border-radius: 20px;
              color: #ef3939;
              margin-top: 50px;
              border: 1px solid #ef3939;
            }
            .selects{
              color: #ef3939;
              border:1px solid #ef3939 !important;
            }
          }
        }

        .wthdrawal{
          margin-top: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .bttn{
            display: flex;
            align-items: center;

            .all{
              width: 200px;
              height: 80px;
              line-height: 80px;
              text-align: center;
              border: 1px solid #00000050;
              border-radius: 20px;
            }
            .btn{
              // margin-top: 20px;
              margin-left: 20px;
              width: 190px;
              height: 80px;
              line-height: 80px;
              border: 1px solid #00000080;
              border-radius: 20px;
              text-align: center;
            }
            ::v-deep(input){
              width: 180px !important;
              line-height: 70px !important;
              border: none !important;
              padding: 0 !important;
              margin: 0;
              text-align: center;
            }
            .inputss{
              margin-left: 20px;
            }
          }
          .wthdrawalbtn{
            width: 230px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border-radius: 20px;
            border: 1px solid green;
            color: green;
            margin-top: 50px;
          }

        }

        .tips{
          position: fixed;
          bottom: 150px;
          width: 100%;
          text-align: center;
          font-size: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
    }

}
.selecteds{
  border: 1px solid green !important;
}
</style>
